<!--
 * @Author: wwssaabb
 * @Date: 2021-09-15 10:23:36
 * @LastEditTime: 2021-09-17 14:45:41
 * @FilePath: \gshop-client\src\views\Shop\components\SubmitBar.vue
-->
<!-- 
  shop页面的购物车组件
 -->

<template>
  <div class="submitbar">
    <div
      class="shop-car"
      :style="{
        backgroundColor: props.count === 0 ? '#2b343c' : '#02a774',
      }"
    >
      <Badge :content="props.count" :show-zero="false">
        <Icon
          name="shopping-cart"
          :color="props.count === 0 ? '#80858a' : '#fff'"
          size="30"
          @click="
            props.popupShow(
              'car_list',
              undefined,
              'bottom',
              undefined,
              false,
              false
            )
          "
        />
      </Badge>
    </div>
    <div class="count">
      <span>￥{{ props.carTotal }}</span>
      <span>另需配送费￥4元</span>
    </div>
    <div
      class="submit-btn"
      :style="{
        backgroundColor:
          props.carTotal < props.limit_condition ? '#2b333b' : '#02a774',
      }"
      @click="checkout"
    >
      {{
        props.carTotal === 0
          ? `￥${props.limit_condition - props.carTotal}元起送`
          : props.carTotal < props.limit_condition
          ? `还差￥${props.limit_condition - props.carTotal}元起送`
          : "结算"
      }}
    </div>
  </div>
</template>

<script setup lang="ts">
import { Icon, Badge } from "vant";

const props = defineProps({
  count: {
    //购物车商品数量
    type: Number,
    required: true,
  },
  carTotal: {
    //购物车金额总和
    type: Number,
    required: true,
  },
  limit_condition: {
    //最小订单金额限制
    type: Number,
    required: true,
  },
  popupShow: {
    //封装popup组件的显示方法
    type: Function,
    required: true,
  },
  isLogined: {
    //登录状态检查，()=>boolean
    type: Function,
    required: true,
  },
  LoginDialog: {
    //登录提示
    type: Function,
    required: true,
  },
});

//结算事件触发
const checkout = () => {
  //触发条件，满足最小购买额度限制
  if (props.carTotal < props.limit_condition) return;
  //检查登录，未登录提示登录
  if (!props.isLogined()) return props.LoginDialog();
  //满足条件后续操作
};
</script>

<style lang="scss" scoped>
.submitbar {
  position: relative;
  height: 50px;
  background-color: #141d27;
  display: flex;
  align-items: center;
  z-index: 100;

  .shop-car {
    position: relative;
    top: -10px;
    left: 10px;
    border: 5px solid #141d27;
    width: 57px;
    height: 57px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2b343c;
  }
  .count {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    span {
      font-size: 12px;
      color: #666;
      &:first-child {
        font-weight: bold;
        font-size: 18px;
        font-family: "Microsoft YaHei";
        color: #fff;
      }
    }
  }
  .submit-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 100%;
    background-color: #2b333b;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: #fff;
  }
}
</style>
